<template>
    <div class="container">
        <HeadCopm></HeadCopm>
        <div class="box1">
            <div class="left">
                <el-image class="img" :src="require('../assets/detail2-img-1.jpg')"
                    :preview-src-list="[require('../assets/detail2-img-1.jpg')]"></el-image>
            </div>
            <div class="right">
                <h1>太阳及太阳系</h1>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                </p>
            </div>
        </div>
        <div class="box2">
            <div class="left">
                <el-image class="img" :src="require('../assets/detail2-img-2.jpg')"
                    :preview-src-list="[require('../assets/detail2-img-2.jpg')]"></el-image>
            </div>
            <h1>太阳系</h1>
            <div class="right">
                <el-image class="img" :src="require('../assets/detail2-img-3.jpg')"
                    :preview-src-list="[require('../assets/detail2-img-3.jpg')]"></el-image>
            </div>
        </div>
        <div class="box3">
            <p>
                太阳系，文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字。
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字。
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字。
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字。
            </p>
        </div>
        <div class="box4">
            <div class="left">
                <el-image class="img" :src="require('../assets/detail2-img-4.jpg')"
                    :preview-src-list="[require('../assets/detail2-img-4.jpg')]"></el-image>
            </div>
            <div class="right">
                <h3>太阳系的绝对核心-太阳</h3>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                </p>
            </div>
        </div>
        <div class="box5">
            <div class="left">
                <h3>太阳的演化</h3>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                </p>
            </div>
            <div class="right">
                <div class="top">
                    <el-image class="img" :src="require('../assets/detail2-img-5.png')"
                    :preview-src-list="[require('../assets/detail2-img-5.png')]"></el-image>
                </div>
                <div class="bottom">
                    <el-image class="img" :src="require('../assets/detail2-img-6.jpg')"
                    :preview-src-list="[require('../assets/detail2-img-6.jpg')]"></el-image>
                </div>
                <h4>蝴蝶星云（MGC 6302）</h4>
            </div>
        </div>
        <div class="box6">
            <div class="left" @click="toDetail">
                <img src="../assets/detail2-img-7.jpg" alt="">
            </div>
            <div class="right">
                <p>有8颗行星围绕太阳旋转，点击图片可跳转至八大行星详情页面</p>
            </div>
        </div>
        <Footer :text="text"></Footer>
    </div>
</template>
<script>
import HeadCopm from "@/components/HeadComp.vue"
import Footer from "@/components/Fotter.vue"
export default {
    name: "Detail2",
    components: {
        HeadCopm,
        Footer
    },
    data() {
        return {
            text: {
                chinese: "你看这一片混乱的星系，就像一棵开花的楼花树。明亮的区域是恒星们的幼儿园。在那里，新的星星正在绽放。",
                english: "This scrambledgalaxy as seen resembles a flowering cherry blossom tree. The bright regions are actually stellar nurseries, where new stars are blooming."
            }
        }
    },
    methods: {
        toDetail() {
            this.$router.push({
                path: '/detail3'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    .box1 {
        padding: 62px 15vw;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #EFEFEF;

        .left {
            .img {
                width: 600px;
                height: 500px;
            }
        }

        .right {
            flex: 1;

            p {
                margin-left: 30px;
                padding: 20px 30px;
                text-align: left;
            }
        }
    }

    .box2 {
        padding: 50px 20vw 50px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;
        >div {
            font-size: 0;

            .img {
                width: 400px;
                height: 300px;
            }
        }

        .left {
            box-shadow: 15px 15px 0px 0px #ccc;
        }

        .right {
           margin-top: 40px;
            box-shadow: -15px 15px 0px 0px #ccc;
        }

        h1 {
            margin: 0 50px;
            writing-mode: vertical-lr;
        }
    }

    .box3 {
        padding: 20px 24vw 50px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;

        p {
            text-align: left;
        }
    }

    .box4 {
        padding: 50px 20vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .left {
            .img {
                width: 300px;
                height: 300px;
            }
        }

        .right {
            height: 300px;
            padding-left: 50px;
            text-align: left;
            h3 {
                margin-bottom: 20px;
            }
            p {
                padding-left: 20px;
            }
        }
    }
    .box5 {
        padding: 70px 20vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .left {
            width: 330px;
            text-align: left;
            padding-top: 30px;
            h3 {
                margin-bottom: 20px;
            }
            p {
                padding-left: 20px;
            }
        }
        .right {
            .top,
            .bottom {
                width: 300px;
                height: 240px;
                .img {
                    width: 100%;
                    height: 100%;
                }
            }
            .top {
                margin-bottom: 20px;
            }
        }
    }
    .box6 {
        padding: 50px 20vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .left {
            img {
                width: 190px;
                object-fit: contain;
                cursor: pointer;
            }
        }
        .right {
            padding-left: 50px;
        }
    }
}
</style>